<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>阿里百秀</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./bootstrap/fonts/glyphicons-halflings-regular.ttf" />
    <link rel="stylesheet" href="./css/index.css" />
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- 响应式容器 -->
    <div class="container">
      <div class="row">
        <header class="col-md-2">
          <!-- logo区域开始 -->
          <div class="logo">
            <h1>
              <a href="#">
                <div class="visible-xs">阿里百秀</div>
                <img class="img-responsive hidden-xs" src="./images/logo.png" />
              </a>
            </h1>
          </div>
          <!-- logo区域结束 -->
          <!-- 页面导航区域开始 -->
          <div class="nav">
            <ul>
              <li>
                <a href="#">
                  <span class="glyphicon glyphicon-camera"></span>
                  <span>生活馆</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="glyphicon glyphicon-picture"></span>
                  <span>自然汇</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="glyphicon glyphicon-phone"></span>
                  <span>科技潮</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="glyphicon glyphicon-gift"></span>
                  <span>奇趣事</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="glyphicon glyphicon-glass"></span>
                  <span>美食节</span>
                </a>
              </li>
            </ul>
          </div>
          <!-- 页面导航区域结束 -->
        </header>
        <!-- 页面主体内容开始 -->
        <main class="col-md-7">
          <!-- 新闻区域开始 -->
          <div class="news">
            <ul class="news-top">
              <li>
                <a href="#">
                  <img src="./images/lg.png" />
                  <p>阿里百秀</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./images/1.jpg" />
                  <p>阿里百秀阿里百秀阿里百秀阿里百秀</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./images/2.jpg" />
                  <p>阿里百秀阿里百秀阿里百秀阿里百秀</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./images/3.jpg" />
                  <p>阿里百秀阿里百秀阿里百秀阿里百秀</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./images/4.jpg" />
                  <p>阿里百秀阿里百秀阿里百秀阿里百秀</p>
                </a>
              </li>
            </ul>
            <div class="news-bottom">
              <div class="publish row">
                <div class="news-content col-sm-9">
                  <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                  <p class="c7 hidden-xs">alibaixiu 发布于 2015-11-23</p>
                  <p class="hidden-xs">
                    指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！
                  </p>
                  <p class="c7">
                    <span>阅读(2417)评论(1)赞 (18) </span>
                    <span>阅读(2417)评论(1)赞 (18) </span>
                  </p>
                </div>
                <div class="col-sm-3 news-img hidden-xs">
                  <img class="img-responsive" src="./images/3.jpg" />
                </div>
              </div>
              <div class="publish row">
                <div class="news-content col-sm-9">
                  <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                  <p class="c7 hidden-xs">alibaixiu 发布于 2015-11-23</p>
                  <p class="hidden-xs">
                    指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！
                  </p>
                  <p class="c7">
                    <span>阅读(2417)评论(1)赞 (18) </span>
                    <span>阅读(2417)评论(1)赞 (18) </span>
                  </p>
                </div>
                <div class="col-sm-3 news-img hidden-xs">
                  <img class="img-responsive" src="./images/3.jpg" />
                </div>
              </div>
              <div class="publish row">
                <div class="news-content col-sm-9">
                  <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                  <p class="c7 hidden-xs">alibaixiu 发布于 2015-11-23</p>
                  <p class="hidden-xs">
                    指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！
                  </p>
                  <p class="c7">
                    <span>阅读(2417)评论(1)赞 (18) </span>
                    <span>阅读(2417)评论(1)赞 (18) </span>
                  </p>
                </div>
                <div class="col-sm-3 news-img hidden-xs">
                  <img class="img-responsive" src="./images/3.jpg" />
                </div>
              </div>
              <div class="publish row">
                <div class="news-content col-sm-9">
                  <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                  <p class="c7 hidden-xs">alibaixiu 发布于 2015-11-23</p>
                  <p class="hidden-xs">
                    指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！
                  </p>
                  <p class="c7">
                    <span>阅读(2417)评论(1)赞 (18) </span>
                    <span>阅读(2417)评论(1)赞 (18) </span>
                  </p>
                </div>
                <div class="col-sm-3 news-img hidden-xs">
                  <img class="img-responsive" src="./images/3.jpg" />
                </div>
              </div>
              <div class="publish row">
                <div class="news-content col-sm-9">
                  <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                  <p class="c7 hidden-xs">alibaixiu 发布于 2015-11-23</p>
                  <p class="hidden-xs">
                    指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！
                  </p>
                  <p class="c7">
                    <span>阅读(2417)评论(1)赞 (18) </span>
                    <span>阅读(2417)评论(1)赞 (18) </span>
                  </p>
                </div>
                <div class="col-sm-3 news-img hidden-xs">
                  <img class="img-responsive" src="./images/3.jpg" />
                </div>
              </div>
            </div>
          </div>
          <!-- 新闻区域结束 -->
        </main>
        <!-- 页面主体内容结束 -->
        <!-- 页面侧边区域开始 -->
        <aside class="col-md-3">
          <a href="#" class="banner">
            <img class="img-responsive" src="./images/zgboke.jpg" />
          </a>
          <a href="#" class="hot">
            <button type="button" class="btn btn-primary">热搜</button>
            <h4 class="text-primary">欢迎加入中国博客联盟</h4>
            <p class="c7">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
          </a>
        </aside>
        <!-- 页面侧边区域结束 -->
      </div>
    </div>
  </body>
</html>
